{% extends 'base.html' %}

{% block title %}库存记录详情 - {{ log.consumable.name }} - 固定资产管理系统{% endblock %}

{% block extra_css %}
<style>
    /* 详情页面样式 */
    .detail-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border: none;
        margin-bottom: 2rem;
    }
    
    .detail-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .detail-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 15px 15px 0 0;
        padding: 2rem;
    }
    
    .transaction-badge {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 0.6rem;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        border: 2px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 100px;
        justify-content: center;
    }

    .transaction-in {
        background: linear-gradient(135deg, #198754, #20c997);
        color: #ffffff;
        border-color: #146c43;
        box-shadow: 0 3px 6px rgba(25, 135, 84, 0.4);
    }

    .transaction-out {
        background: linear-gradient(135deg, #dc3545, #e85d75);
        color: #ffffff;
        border-color: #b02a37;
        box-shadow: 0 3px 6px rgba(220, 53, 69, 0.4);
    }
    
    .info-item {
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .info-item:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }
    
    .info-value {
        font-size: 1.1rem;
        color: #495057;
    }
    
    .quantity-display {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .quantity-in {
        color: #198754;
    }
    
    .quantity-out {
        color: #dc3545;
    }
    
    .stock-balance {
        font-weight: 600;
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        background: #e3f2fd;
        color: #1976d2;
        border: 1px solid #bbdefb;
        display: inline-block;
        min-width: 80px;
        text-align: center;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border: none;
        margin-bottom: 1rem;
    }
    
    .stats-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }
    
    .stats-number {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .stats-label {
        color: #6c757d;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .related-logs {
        max-height: 400px;
        overflow-y: auto;
    }
    
    .log-item {
        padding: 1rem;
        border-bottom: 1px solid #f0f0f0;
        transition: all 0.3s ease;
    }
    
    .log-item:hover {
        background-color: #f8f9fa;
    }
    
    .log-item:last-child {
        border-bottom: none;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .detail-header {
            padding: 1.5rem;
        }
        
        .quantity-display {
            font-size: 1.5rem;
        }
        
        .stats-number {
            font-size: 1.5rem;
        }
    }
    
    /* 打印样式 */
    @media print {
        .btn, .breadcrumb {
            display: none !important;
        }
        
        .detail-card {
            box-shadow: none;
            border: 1px solid #dee2e6;
        }
        
        .detail-header {
            background: #f8f9fa !important;
            color: #000 !important;
            -webkit-print-color-adjust: exact;
        }
        
        body {
            font-size: 12px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'assets:consumable_list' %}">耗材管理</a></li>
            <li class="breadcrumb-item"><a href="{% url 'assets:inventory_log_list' %}">库存记录</a></li>
            <li class="breadcrumb-item active" aria-current="page">记录详情</li>
        </ol>
    </nav>

    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">
            <i class="fas fa-info-circle me-2 text-primary"></i>库存记录详情
        </h2>
        <div class="btn-group">
            <a href="{% url 'assets:inventory_log_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
            <button type="button" class="btn btn-info" onclick="window.print()">
                <i class="fas fa-print me-1"></i>打印
            </button>
            <a href="{% url 'assets:consumable_detail' log.consumable.pk %}" class="btn btn-primary">
                <i class="fas fa-box me-1"></i>查看耗材
            </a>
        </div>
    </div>

    <div class="row">
        <!-- 左侧主要信息 -->
        <div class="col-lg-8">
            <!-- 记录基本信息 -->
            <div class="detail-card">
                <div class="detail-header">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h3 class="mb-2">
                                <i class="fas fa-history me-2"></i>操作记录 #{{ log.id }}
                            </h3>
                            <div class="mb-3">
                                {% if log.transaction_type == "in" %}
                                <span class="transaction-badge transaction-in">
                                    <i class="fas fa-arrow-down"></i>入库操作
                                </span>
                                {% else %}
                                <span class="transaction-badge transaction-out">
                                    <i class="fas fa-arrow-up"></i>出库操作
                                </span>
                                {% endif %}
                            </div>
                            <p class="mb-0 opacity-75">
                                <i class="fas fa-clock me-2"></i>{{ log.created_at|date:"Y年m月d日 H:i:s" }}
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="quantity-display {% if log.transaction_type == 'in' %}quantity-in{% else %}quantity-out{% endif %}">
                                {% if log.transaction_type == "in" %}+{% else %}-{% endif %}{{ log.quantity }}
                            </div>
                            <div class="text-white-50">{{ log.consumable.unit }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">
                                    <i class="fas fa-box me-2 text-primary"></i>耗材信息
                                </div>
                                <div class="info-value">
                                    <strong>{{ log.consumable.name }}</strong>
                                    <br>
                                    <small class="text-muted">
                                        <i class="fas fa-barcode me-1"></i>{{ log.consumable.code }}
                                        {% if log.consumable.category %}
                                        <span class="ms-2">
                                            <i class="fas fa-tag me-1"></i>{{ log.consumable.category.name }}
                                        </span>
                                        {% endif %}
                                    </small>
                                </div>
                            </div>
                            
                            <div class="info-item">
                                <div class="info-label">
                                    <i class="fas fa-user me-2 text-info"></i>操作人员
                                </div>
                                <div class="info-value">
                                    {% if log.operator %}
                                    <strong>{{ log.operator.get_full_name|default:log.operator.username }}</strong>
                                    <br>
                                    <small class="text-muted">{{ log.operator.username }}</small>
                                    {% else %}
                                    <span class="text-muted">
                                        <i class="fas fa-robot me-1"></i>系统操作
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="info-item">
                                <div class="info-label">
                                    <i class="fas fa-warehouse me-2 text-success"></i>存储仓库
                                </div>
                                <div class="info-value">
                                    {% if log.consumable.warehouse %}
                                    <strong>{{ log.consumable.warehouse.name }}</strong>
                                    {% if log.consumable.warehouse.location %}
                                    <br>
                                    <small class="text-muted">
                                        <i class="fas fa-map-marker-alt me-1"></i>{{ log.consumable.warehouse.location.name }}
                                    </small>
                                    {% endif %}
                                    {% else %}
                                    <span class="text-muted">未指定仓库</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">
                                    <i class="fas fa-calculator me-2 text-warning"></i>数量变化
                                </div>
                                <div class="info-value">
                                    <span class="{% if log.transaction_type == 'in' %}text-success{% else %}text-danger{% endif %} fw-bold">
                                        {% if log.transaction_type == "in" %}+{% else %}-{% endif %}{{ log.quantity }} {{ log.consumable.unit }}
                                    </span>
                                </div>
                            </div>
                            
                            <div class="info-item">
                                <div class="info-label">
                                    <i class="fas fa-chart-bar me-2 text-primary"></i>操作后余额
                                </div>
                                <div class="info-value">
                                    {% if log.remaining_quantity is not None %}
                                    <span class="stock-balance">
                                        {{ log.remaining_quantity }} 
                                        {% if log.consumable.unit == '元' %}个{% else %}{{ log.consumable.unit }}{% endif %}
                                    </span>
                                    {% else %}
                                    <span class="text-muted">未记录</span>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="info-item">
                                <div class="info-label">
                                    <i class="fas fa-comment me-2 text-secondary"></i>操作说明
                                </div>
                                <div class="info-value">
                                    {% if log.description %}
                                    <div class="alert alert-light mb-0">
                                        {{ log.description }}
                                    </div>
                                    {% else %}
                                    <span class="text-muted">暂无说明</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧统计信息 -->
        <div class="col-lg-4">
            <!-- 统计概览 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="stats-card">
                        <div class="stats-number text-primary">{{ current_stock }}</div>
                        <div class="stats-label">当前库存</div>
                    </div>
                </div>
            </div>
            
            <div class="row mb-4">
                <div class="col-6">
                    <div class="stats-card">
                        <div class="stats-number text-success">{{ total_in }}</div>
                        <div class="stats-label">总入库</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stats-card">
                        <div class="stats-number text-danger">{{ total_out }}</div>
                        <div class="stats-label">总出库</div>
                    </div>
                </div>
            </div>

            <!-- 相关记录 -->
            <div class="detail-card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-list me-2"></i>相关记录
                        <small class="text-muted">({{ log.consumable.name }})</small>
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="related-logs">
                        {% for related_log in related_logs %}
                        <div class="log-item {% if related_log.id == log.id %}bg-light{% endif %}">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    {% if related_log.transaction_type == "in" %}
                                    <span class="badge bg-success me-2">
                                        <i class="fas fa-arrow-down me-1"></i>入库
                                    </span>
                                    {% else %}
                                    <span class="badge bg-danger me-2">
                                        <i class="fas fa-arrow-up me-1"></i>出库
                                    </span>
                                    {% endif %}
                                    <span class="fw-bold">
                                        {% if related_log.transaction_type == "in" %}+{% else %}-{% endif %}{{ related_log.quantity }}
                                    </span>
                                    <small class="text-muted ms-1">{{ related_log.consumable.unit }}</small>
                                </div>
                                <div class="text-end">
                                    <div class="small text-muted">
                                        {{ related_log.created_at|date:"m-d H:i" }}
                                    </div>
                                    {% if related_log.id == log.id %}
                                    <small class="text-primary">当前记录</small>
                                    {% endif %}
                                </div>
                            </div>
                            {% if related_log.description %}
                            <div class="mt-2">
                                <small class="text-muted">{{ related_log.description|truncatechars:30 }}</small>
                            </div>
                            {% endif %}
                        </div>
                        {% empty %}
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-inbox fa-2x mb-2"></i>
                            <p class="mb-0">暂无相关记录</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% if related_logs|length >= 10 %}
                <div class="card-footer text-center">
                    <a href="{% url 'assets:inventory_log_list' %}?search={{ log.consumable.name }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-list me-1"></i>查看全部记录
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    // 高亮当前记录
    const currentLogItem = document.querySelector('.log-item.bg-light');
    if (currentLogItem) {
        currentLogItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
});

// 打印功能优化
function printPage() {
    // 隐藏不需要打印的元素
    const elementsToHide = document.querySelectorAll('.btn, .breadcrumb');
    elementsToHide.forEach(el => el.style.display = 'none');
    
    // 添加打印标题
    const printTitle = document.createElement('div');
    printTitle.innerHTML = `
        <div style="text-align: center; margin-bottom: 20px; page-break-inside: avoid;">
            <h2>库存记录详情</h2>
            <p>打印时间: ${new Date().toLocaleString()}</p>
        </div>
    `;
    document.querySelector('.container-fluid').insertBefore(printTitle, document.querySelector('.row'));
    
    // 执行打印
    window.print();
    
    // 打印完成后恢复页面
    setTimeout(() => {
        elementsToHide.forEach(el => el.style.display = '');
        printTitle.remove();
    }, 1000);
}
</script>
{% endblock %}